<template>
  <div class="stageStyle" style="height: 600px;" ref="divRef">
    <div style="height: 11%;">
      <div style="padding-top:0px;padding-left: 135px;padding-right: 135px;">

        <div class="step-indicator">
          <div v-for="item in displayStage" :key="item.id" @click="convertStage(item.id)"
               :class="{yuShe: item.isYuShe, selected: item.isShow}" v-if="item.id !== 3">
            <div class="step">
              <div style="display: flex;flex-direction: column;">
                <div style=" display: flex;justify-content: center; ">
                  <img :src="item.image" class="step-Image">
                </div>
                <p class="step-title">{{ item.stageName }}</p>
              </div>
            </div>

          </div>
        </div>
      </div>
      <hr size="1" color="#DCDFE6">
      <!-- <div class="line"></div> -->
      <!-- 阶段内容 -->
    </div>
    <!-- 勘察阶段 -->
    <div v-if="displayStage[1].isShow" style="height: 85%;margin-top: 2%;">
      <survergy-stage :projectInfo="projectInfo"/>
    </div>

    <!-- 方案编制阶段 -->
    <div v-else-if="displayStage[2].isShow" style="height: 85%;margin-top: 2%;">
      <program-stage/>
    </div>
    <!-- 施工阶段 -->
    <construct-stage v-else-if="displayStage[6].isShow" style="margin-top: 45px;" :projectInfo="projectInfo"/>
    <!-- 验收阶段 -->
    <check-stage v-else-if="displayStage[7].isShow" style="margin-top: 45px;" :projectInfo="projectInfo"/>
  </div>
</template>
<script>
import {getInfo} from "@/api/project/info";
import survergyStage from '../../../components/AllStage/survergyStage.vue';
import programStage from '../../../components/AllStage/programStage.vue';
import constructStage from '../../../components/AllStage/constructStage';
import CheckStage from '../CheckStage.vue';
import {EventBus} from '@/main';

export default {
  name: 'StageMoreSlight',
  data() {
    return {
      active: 1,
      displayStage: [
        {
          stageName: "对接阶段",
          isShow: false,
          id: 0,
          image: require('../../../assets/images/stageIcon/对接.png'),
          isYuShe: false
        },
        {
          stageName: "勘察阶段",
          isShow: false,
          id: 1,
          image: require('../../../assets/images/stageIcon/勘察.png'),
          isYuShe: false
        },
        {
          stageName: "方案编制阶段",
          isShow: false,
          id: 2,
          image: require('../../../assets/images/stageIcon/方案编制.png'),
          isYuShe: false
        },
        {
          stageName: "方案汇报阶段",
          isShow: false,
          id: 3,
          image: require('../../../assets/images/stageIcon/方案汇报.png'),
          isYuShe: false
        },
        {
          stageName: "报价阶段",
          isShow: false,
          id: 4,
          image: require('../../../assets/images/stageIcon/报价.png'),
          isYuShe: false
        },
        {
          stageName: "合同签订阶段",
          isShow: false,
          id: 5,
          image: require('../../../assets/images/stageIcon/合同签订.png'),
          isYuShe: false
        },
        {
          stageName: "施工阶段",
          isShow: false,
          id: 6,
          image: require('../../../assets/images/stageIcon/施工.png'),
          isYuShe: false
        },
        {
          stageName: "验收阶段",
          isShow: false,
          id: 7,
          image: require('../../../assets/images/stageIcon/验收.png'),
          isYuShe: false
        }
      ],
      ///项目信息
      projectInfo: {},
      clickStep: null,
      projectId: null
    };
  },
  created() {
    const projectId = this.$route.params && this.$route.params.projectId;
    this.projectId = projectId
    this.clickStep = this.$route.query.clickStep;
    this.setStep();
    this.getInfo(projectId);
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.$router.beforeEach((to, from, next) => {
      if (from.query.clickStep !== to.query.clickStep) {
        const newClickStep = to.query.clickStep;
        if(newClickStep){
          this.convertStage1(newClickStep-1)
        }
      }
      next();
    });
    this.handleResize();
    //事件总线
    EventBus.$on('update-is-yusheDJ', this.handleUpdateIsYuSheDJ);
    EventBus.$on('update-is-yusheKC', this.handleUpdateIsYuSheKC);
    EventBus.$on('update-is-yusheFABZ', this.handleUpdateIsYuSheFABZ);
    EventBus.$on('update-is-yusheFAHB', this.handleUpdateIsYuSheFAHB);
    EventBus.$on('update-is-yusheBJ', this.handleUpdateIsYuSheBJ);
    EventBus.$on('update-is-yusheSG', this.handleUpdateIsYuSheSG);
    EventBus.$on('update-is-yusheYS', this.handleUpdateIsYuSheYS);
    EventBus.$on('update-is-yusheHTQD', this.handleUpdateIsYuSheHTQD);

  },
  methods: {
    handleUpdateIsYuSheDJ(isYuShe) {
      this.displayStage[0].isYuShe = isYuShe;
    },
    handleUpdateIsYuSheKC(isYuShe) {
      this.displayStage[1].isYuShe = isYuShe;
    },
    handleUpdateIsYuSheFABZ(isYuShe) {
      this.displayStage[2].isYuShe = isYuShe;
    },
    handleUpdateIsYuSheFAHB(isYuShe) {
      this.displayStage[3].isYuShe = isYuShe;
    },
    handleUpdateIsYuSheBJ(isYuShe) {
      this.displayStage[4].isYuShe = isYuShe;
    },
    handleUpdateIsYuSheSG(isYuShe) {
      this.displayStage[6].isYuShe = isYuShe;
    },
    handleUpdateIsYuSheYS(isYuShe) {
      this.displayStage[7].isYuShe = isYuShe;
    },
    handleUpdateIsYuSheHTQD(isYuShe) {
      this.displayStage[5].isYuShe = isYuShe;
    },
    setStep() {
      for (let i = 1; i <= this.displayStage.length; i++) {
        this.clickStep == i ? this.displayStage[i - 1].isShow = true : this.displayStage[i - 1].isShow = false;
      }
    },
    getInfo(projectId) {
      getInfo(projectId).then(response => {
        this.projectInfo = response.data;

          this.displayStage[0].isYuShe = response.dock ? true : false;
          this.displayStage[1].isYuShe = response.kc ? true : false;
          this.displayStage[2].isYuShe = response.fabz ? true : false;
          this.displayStage[3].isYuShe = response.fahb ? true : false;
          this.displayStage[4].isYuShe = response.bj ? true : false;
          this.displayStage[6].isYuShe = response.sg ? true : false;
          this.displayStage[7].isYuShe = response.ys ? true : false;
          this.displayStage[5].isYuShe = response.htqd ? true : false;
      })
    },
    convertStage(id) {
      const projectId = this.$route.params && this.$route.params.projectId;
      for (let i = 0; i < this.displayStage.length; i++) {
        if (id == i && !this.displayStage[i].isYuShe && this.projectId == projectId) {
          this.$message("该阶段未开始，请先阶段预设！");
          return
        }
      }

      for (let i = 0; i < this.displayStage.length; i++) {
        if (this.displayStage[i].id != id) {
          this.displayStage[i].isShow = false
        } else {
          this.displayStage[i].isShow = true
          this.clickStep = id + 1;
          var newUrl = window.location.href.replace(/clickStep=\d+/, "clickStep=" + this.clickStep);
          history.pushState({}, "", newUrl);
        }
      }
    },
    convertStage1(id) {
      for (let i = 0; i < this.displayStage.length; i++) {
        if (this.displayStage[i].id != id) {
          this.displayStage[i].isShow = false
        } else {
          this.displayStage[i].isShow = true
          this.clickStep = id + 1;
          var newUrl = window.location.href.replace(/clickStep=\d+/, "clickStep=" + this.clickStep);
          history.pushState({}, "", newUrl);
        }
      }
    },
    handleResize() {
      // 获取浏览器窗口的高度
      const windowHeight = window.innerHeight - 120;
      // 设置div元素的高度为浏览器窗口的高度
      this.$refs.divRef.style.height = `${windowHeight}px`;
    },

  },
  components: {
    survergyStage,
    programStage,
    constructStage,
    CheckStage
  },
  beforeDestroy() {
    // 在组件销毁前移除监听事件
    window.removeEventListener('resize', this.handleResize);
    window.addEventListener('storage', this.handleStorageChange);
  },
}
</script>

<style>
.stageStyle {
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.16);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 15px;
  height: 100%;
}

.line {
  margin-top: 20px;
  width: calc(100%);
  height: 0px;
  opacity: 1;
  border: 1px solid #DCDFE6;
}

.step-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.step {
  position: relative;
  width: 120px;
  height: 90px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  /* 添加边框样式 */
  border-radius: 8px;
}

.step:hover {
  cursor: pointer;
  border: 2px solid rgba(24, 144, 255, 1);
  /* 添加边框样式 */
  border-radius: 8px;
}

.selected .step {
  border: 2px solid rgba(24, 144, 255, 1);
  background-color: rgba(24, 144, 255, 0.15); /* 蓝色透明 */
  border-radius: 8px;
}

.yuShe .step-Image {
  filter: brightness(30%);
}

.yuShe .step-title {
  color: #606266;
}

.selected .step-title {
  color: #2979FF;
}

.selected .step-Image {
  filter: grayscale(100%) invert(40%) sepia(100%) brightness(0.7) saturate(8) hue-rotate(200deg);
}


.step::before {
  /* content: "";
  position: absolute;
  top: 30%;
  left: -50%;
  width: calc(50% - 15px);
  height: 2px;
  background-color: gray; */
}

.step-title {
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #C0C4CC;
  margin-top: 12px;
}

.step-Image {
  margin-top: 15px;
  width: 25px;
  height: 25px;
  text-align: center;
}

.frame {
  overflow-y: scroll; /* 始终显示纵向滚动条 */
  scrollbar-width: thin; /* 设置滚动条的宽度 */
  scrollbar-color: #ffffff transparent; /* 设置滚动条的颜色 */
}
</style>
